<template>
    <div id='wrap'>
        <h1>侦听器watchEffect</h1>
        <p>
            inputVal: <input type="text" v-model="inputVal">
        </p>
        <p>
            <input type="text" v-model="num1">
            <input type="text" v-model="num2">
        </p>
        <!-- <button type="button">求和{{ sunNum }}</button> -->
        <p>
            getter inputVal: <input type="text" v-model="inputVal">
        </p>
        <p>
            <input v-model="ruser.name"></input>
            <input v-model="ruser.sex"></input>
            <input v-model="ruser.love.hobby"></input>
        </p>
    </div>
</template>
<script lang='ts'>
export default {
    name: 'watchEffect',
}
</script>
<script lang='ts' setup>
import { sum } from 'lodash';
import { watch, watchEffect, computed, ref, h, type Ref, isRef, reactive, isReactive, readonly, isReadonly, toRef, toRefs, unref, isProxy } from 'vue';
//ref响应式变量（包括计算属性）
const inputVal = ref('默认值');
const num1 = ref(0);
const num2 = ref(0);
const ruser = reactive({
    name: '王小桃',
    sex: '女',
    love: {
        hobby: '打游戏,写代码'
    }
})

// //监听响应式的变量
// watch(inputVal, (newValue, oldValue) => {
//     console.log('newValue:' + newValue, 'oldValue:' + oldValue)
// })
// watchEffect(() => {
//     console.log('新监听的变量' + inputVal.value)
// })

// //监听计算属性
// const sunNum = computed(() => {
//     return num1.value + num2.value;
// })
// watchEffect(() => {
//     console.log('新监听的变量' + sunNum.value)
// })

// //监听getter函数
// watch(() => inputVal.value, (newValue, oldValue) => {
//     console.log('getter newValue:' + newValue, 'getter oldValue:' + oldValue)
// })

// watchEffect(() => {
//     console.log((() => inputVal.value)());
// })

// watchEffect(() => {
//     const sum = () => num1.value * num2.value;
//     console.log('sum:' + sum())
// })

// //多个数组源组成的数组
// watch([
//     inputVal,
//     () => num1.value * num2.value,
//     () => inputVal.value,
//     () => num1.value + num2.value], ([a1, a2, a3, a4], [b1, b2, b3, b4]) => {
//         console.log(`新值：${a1},${a2},${a3},${a4}`);
//         console.log(`旧值：${b1},${b2},${b3},${b4}`);
//     })

// watchEffect(() => {
//     //解构赋值
//     const [value, ride, iptval, sum] = [inputVal.value, (() => num1.value * num2.value)(), (() => inputVal.value)(), (() => num1.value + num2.value)()]
//     console.log(value, ride, iptval, sum);
// })

//监听对象属性  ps：不能直接监听‘响应式对象’的属性值
watch(ruser, (newValue, oldValue) => {
    console.log('newValue:' + newValue.name, 'oldValue:' + oldValue.name)
}, { deep: true })

watchEffect(() => {
    console.log(`新值:${ruser.name}`)
})
</script>
<style lang='scss'>
@use '@/assets/common.scss';
</style>